<template>
	<view class="main">
		<u-row>
			<u-col span="9" >
			
				  年轻人 打工魂 1{{ fromNow() }}
			</u-col>
			<u-col span="2" style="text-align: end;" @click="changeCity">
					{{ curCity || '北京' }} 
			</u-col>
			<u-col span="1"  @click="changeCity" >
					<u-icon name="map-fill" :size="46" ></u-icon> 
			</u-col>
		</u-row>
		<u-row style="padding: 5px 0;">
			<u-col span="11" >
				<u-search :show-action="false"></u-search>
			</u-col>
			<u-col span="1"  >
					<u-icon name="calendar" :size="46"></u-icon>
			</u-col>
		</u-row>
		  
			  
	<view class="wrap">
			<u-swiper :list="bars"></u-swiper>
		</view>
	<u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
	<view class="u-flex"> 
				<u-dropdown ref="uDropdown"> 
						<u-dropdown-item title="区域" style="width: 100vw;">
							<view class="slot-content" style="background-color: #FFFFFF;">
								<scroll-view scroll-y="true" style="height: 100rpx;">  
									  <SubTag :value="filter.eh" text="二环" trag='eh' @call="setFillter"/>
									  <SubTag :value="filter.sh" text="三环" trag='sh' @call="setFillter"/>
									  <SubTag text="城东" trag='cd' />
									  <SubTag text="城南" trag='cn' />
									  <SubTag text="城西" trag='cx' />
									  <SubTag text="城北" trag='cb' /> 
								</scroll-view>
								<u-button type="primary" @click="closeDropdown">确定</u-button>
							</view>
							</u-dropdown-item>
							<u-dropdown-item title="排序" style="width: 100vw;">
								<view class="slot-content" style="background-color: #FFFFFF;">
									<scroll-view scroll-y="true" style="height: 100rpx;">
										<SubTag text="价格" trag='eh' />
										<SubTag text="发布时间"  trag='eh'/>
										<SubTag text="工时"  trag='eh'/> 
									</scroll-view>
									<u-button type="primary" @click="closeDropdown">确定</u-button>
								</view>
								</u-dropdown-item>
							 <u-dropdown-item title="筛选" style="width: 100vw;">
							 	<view class="slot-content" style="background-color: #FFFFFF;">
							 		<scroll-view scroll-y="true" style="height: 100rpx;">
							 			<SubTag text="日结"  trag='eh'/>
							 			<SubTag text="周结"  trag='eh'/>
							 			<SubTag text="月结"  trag='eh'/> 
										<SubTag text="男性" trag='eh' />
										<SubTag text="女性" trag='eh' /> 
							 		</scroll-view>
							 		<u-button type="primary" @click="closeDropdown">确定</u-button>
							 	</view>
							 	</u-dropdown-item>
						</u-dropdown> 
						
	  </view>
	  <u-icon name="reload" style="position: absolute;margin-top: -30px; right:15px;"></u-icon> 
	  <view class="item-card" >
	 			<u-row >
	 				<u-col span="8"><view >蜜雪冰城招聘兼职</view> </u-col>
	 				<u-col span="4"> <view >前一小时发布</view></u-col>
	 			</u-row>
	 			<u-row >
	 				<u-col span="6"><view class="card-line2-left">日结 男性</view> </u-col>
	 				<u-col span="6"> <view class="card-line2-right">180元/天</view></u-col>
	 			</u-row>
	 			<u-row class="card-line3">
	 				<u-col span="8"><view >蜜雪冰城</view> </u-col>
	 				<u-col span="4"> <view >深圳附近</view></u-col>
	 			</u-row>
	 	</view>
		<view class="item-card" >
					<u-row >
						<u-col span="8"><view >蜜雪冰城招聘兼职</view> </u-col>
						<u-col span="4"> <view >前一小时发布</view></u-col>
					</u-row>
					<u-row >
						<u-col span="6"><view class="card-line2-left">日结 男性</view> </u-col>
						<u-col span="6"> <view class="card-line2-right">180元/天</view></u-col>
					</u-row>
					<u-row class="card-line3">
						<u-col span="8"><view >蜜雪冰城</view> </u-col>
						<u-col span="4"> <view >深圳附近</view></u-col>
					</u-row>
				</view>
		
	  <u-popup v-model="show" mode="bottom">
	  		<view>
	  			签到页面
				<u-checkbox-group>
					<u-checkbox v-model="checked" active-color="red">周一</u-checkbox>
					<u-checkbox v-model="checked" active-color="red">周二</u-checkbox>
					<u-checkbox v-model="checked" active-color="red">周一</u-checkbox>
					<u-checkbox v-model="checked" active-color="red">周二</u-checkbox>
					<u-checkbox v-model="checked" active-color="red">周一</u-checkbox>
					<u-checkbox v-model="checked" active-color="red">周二</u-checkbox>
					<u-checkbox v-model="checked" active-color="red">周一</u-checkbox> 
				</u-checkbox-group> 
	  		</view>
	  	</u-popup>
	</view> 
</template>
 <script>
   import {  api } from '@/app/api.js'  
   import { encrypt,decrypt } from "@/lib/jsencrypt";
   import SubTag from '@/app/components/subTag.vue'  
   import CodeImg from '@/app/components/CodeImg.vue'  
   import {mapState,mapMutations} from 'vuex';
   export default {
	        onLoad() {
	        	 uni.setNavigationBarTitle({title:"首页"})
	        }, 
			components:{
				SubTag,CodeImg
			},
			computed: { ...mapState(['curCity']),},
            data() {
                return { 
					checked:true,
					show:true,
					filter:{
						eh:false,
						sh:false, 
						cd:false,
						cn:false, 
					    cx:false, 
						cb:false, 
						price:false,
						create:false, 
						time:false,  
					},
					tabs: [{ name: '推荐',count: 5 },
					       { name: '餐饮服务' },
						   { name: '物流仓储' },
						   { name: '超市零售' }, 
						   { name: '酒店接待', 		
						 }],
						 current: 0,
					bars: [{ image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',title: ''},
							 {image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',title: ''},
							 {image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',title: ''}
						],
					value: '',
									type: 'select',
									show: false,
									border: true,
									actionSheetList: [ 
									],
				  cur:null, 
				   
                }
            },
			watch:{
			        cur(val, oldVal){ 
			            console.log("cur: "+val, oldVal);
						this.getData()
			        }, 
			}, 
			mounted() {  
				
		 
				 
				 // this.getData()
				// https://www.baidu.com/s?wd=%E5%8F%B0%E6%B9%BE%E8%91%97%E5%90%8D%E9%AD%94%E6%9C%AF%E5%B8%88%E8%B4%BE%E5%85%8B%E7%A4%BC%E9%80%9D%E4%B8%96
			},
			methods:{
				 
				setFillter(obj){
					console.log("obj: ",obj);
					this.filter = Object.assign({},this.filter,obj)
					console.log("filter: ",this.filter);
				},
				changeCity(){
					uni.navigateTo({url:"/app/components/city"})
				},
				closeDropdown() {
					this.$refs.uDropdown.close();
				},
				change(index) {
					this.current = index;
				},
				actionSheetCallback(index) {
					this.value = this.actionSheetList[index].text;
				},
				getData(){ 
					var th = this;   
					api(juhe.history,{
						date:[new Date().getMonth() + 1,new Date().getDate()].join("/"),
						key:keys.history,
					 }).then(data=>{
						  
					 	console.log("历史上的今天: ",data);
						console.log("历史上的今天: ",JSON.stringify(	data));  
						th.list =  data.data.result
					 })
				}, 
			}
     }
 </script>
<style> 
.box_cus{
	height: 30px;
}
.main{
	padding: 10px;
} 
.col{
	display: flex;
	flex-direction: column;
}
.center{
	justify-content: center;
    align-items: center;
}
.item-card{
	border: 1px solid #ccc;
	padding: 10px;  
	margin-bottom:5px ;
	border-radius: 4px;
}
/* 卡片内的样式*/  
.card-line2-left{
	color: #a5a5a5;
	
}
.card-line2-right{
	color: #ef1c1c;
	font-size: 24px;
	text-align: right;
}
.card-line3{
	margin-top: 20px; font-size: 12px;
}
.filter{
	margin: 3px;
}

</style>

